import React from 'react';
// import {observer} from 'mobx-react';
import AppleItem from './AppleItem';
import { observer } from 'mobx-react-lite'
import '../styles/appleBasket.scss';
// @observer
function getAppleItem() {
    let data = [];
    this.props.store.apples.forEach(apple => {
        if (!apple.isEaten) {
            data.push( <AppleItem apple={apple} eatApple={this.props.store.eatApple} key={apple.id}/> )
        }
    });

    if(!data.length) data.push(<div className="empty-tip" key="empty">苹果篮子空空如也</div>);

    return data;
}
function AppleBusket ({store}){
    console.log(store);
    /** 获取未吃苹果的组件数组*/
    

    // render(){
        let { status, apples,isPicking, buttonText, pickApple  } = store;
        let {
            appleNow: {quantity:notEatenQuantity,weight:notEatenWeight},
            appleEaten: {quantity:EatenQuantity,weight:EatenWeight}
        } = status;
        // let {
        //     appleNow: {quantity:notEatenQuantity,weight:notEatenWeight},
        //     appleEaten: {quantity:EatenQuantity,weight:EatenWeight}
        // } = status;
        function getAppleItem() {
            let data = [];
            apples.forEach(apple => {
                if (!apple.isEaten) {
                    data.push( <AppleItem apple={apple} eatApple={store.eatApple} key={apple.id}/> )
                }
            });
    
            if(!data.length) data.push(<div className="empty-tip" key="empty">苹果篮子空空如也</div>);
            return data;
        }
        return (
            <div className="appleBusket">
                <div className="title">苹果篮子</div>

                <div className="stats">
                    <div className="section">
                        <div className="head">当前</div>
                        <div className="content">{notEatenQuantity}个苹果，{notEatenWeight}克
                        </div>
                    </div>
                    <div className="section">
                        <div className="head">已吃掉</div>
                        <div className="content">{EatenQuantity}个苹果，{EatenWeight}克</div>
                    </div>
                </div>

                <div className="appleList">
                    {
                        getAppleItem()
                    }
                    {
                        apples.length===0 && <div className="empty-tip" key="empty">苹果篮子空空如也</div>
                    }
                    {/* <AppleItem apple={apple} eatApple={this.props.store.eatApple} key={apple.id}/> */}
                </div>

                <div className="btn-div">
                    <button  className={isPicking ? 'disabled' : ''}  onClick={() => pickApple() } >{buttonText}</button>
                </div>
            </div>
        );
    // }
}



// export default AppleBusket
export default observer(AppleBusket);